<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>赛博小车控制台</title>
        <link rel="shortcuticon" href="#"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='cyber.css') }}">
        <script src="{{ url_for('static', filename='socket.io.js') }}"></script>
        <script src="{{ url_for('static', filename='control.js') }}"></script>

        <!-- <script src="{{ url_for('static', filename='WebRTC.js') }}"></script> -->
        <!-- <link rel="stylesheet" href="./cyber.css">
        <script src="./control.js"></script> -->
        
    </head>
<body>
    <div class="container">
        <!-- 左上视频 -->
        <div class="panel video-panel">
            <!-- <video id="webrtc-video" autoplay playsinline controls></video> -->
        </div>

        <!-- 右上数据 -->
        <div class="panel data-panel">
            <div class="data-item">温度 <span id="temp">--</span> °C</div>
            <div class="data-item">速度 <span id="speed">--</span> %</div>
            <div class="data-item">时间 <span id="time">--</span></div>
        </div>

        <!-- 方向键 -->
        <div class="panel ctrl-panel">
            <!-- 前进 -->
            <button class="dir-btn" 
            onmousedown="cmdJsonCmd({'T':cmd_movition_ctrl,'L':max_speed,'R':max_speed});"
            onmouseup = "cmdJsonCmd({'T':cmd_movition_ctrl,'L':0,'R':0});"
            >▲</button>

            <div class="mid-row">
                <!-- 左转 -->
                <button class="dir-btn" 
                onmousedown="cmdJsonCmd({'T':cmd_movition_ctrl,'L':slow_speed,'R':max_speed});"
                onmouseup = "cmdJsonCmd({'T':cmd_movition_ctrl,'L':0,'R':0});"
                >◀</button>
                <!-- 停止 -->
                <button class="dir-btn" 
                onmousedown="cmdJsonCmd({'T':cmd_movition_ctrl,'L':0,'R':0});"
                >⏸</button>
                <!-- 右转 -->
                <button class="dir-btn" 
                onmousedown="cmdJsonCmd({'T':cmd_movition_ctrl,'L':max_speed,'R':slow_speed});"
                onmouseup = "cmdJsonCmd({'T':cmd_movition_ctrl,'L':0,'R':0});"
                >▶</button>
            </div>
            <!-- 后退 -->
            <button class="dir-btn"
            onmousedown="cmdJsonCmd({'T':cmd_movition_ctrl,'L':-slow_speed,'R':-max_speed});"
            onmouseup = "cmdJsonCmd({'T':cmd_movition_ctrl,'L':0,'R':0});"
            >▼</button>
        </div>

        <!-- 设备开关 -->
        <div class="panel device-panel">
            <button class="device-btn" data-dev="light" data-action="on">灯开</button>
            <button class="device-btn" data-dev="light" data-action="off">灯关</button>
            <button class="device-btn" data-dev="buzzer" data-action="on">蜂鸣开</button>
            <button class="device-btn" data-dev="buzzer" data-action="off">蜂鸣关</button>
        </div>
        
    </div>
</body>
</html>